<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.png" />
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script type="text/javascript">
    	//先加载loading动画3s，再判断页面元素是否加载完毕，完毕则跳转，未完毕则继续显示动画
    	setTimeout(function () {
			$(document).ready(function () {
		 	$(".page1").fadeIn(1500);
		 	$(".loader").fadeOut(50);
		 });
    }, 3000);
    </script>

    <title>虎年大吉( /^ω^)/♪</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
    />
    <link rel="stylesheet" href="css/style.css" />
    <style>
    @font-face
    {
        font-family: xdxwc;
        src: url(font/xdxwc.ttf);
    }
    * {
        padding: 0;
        margin: 0;
        font-family: xdxwc;
    }
    body{font-family: xdxwc;}
	.blue{color: blue;}
    .loader {
    	margin-top: 50%;
    }
    .page1,.page2,.loader2{
    	display: none;
    	overflow: hidden;
    }
    .watch{
    	width:50%;
    	position: absolute;
    	bottom: 0;
    	right: 0;
    	z-index: 1;
    }
    .watcha{
      animation-name: wathca;
      animation: wathca 1s alternate;
      -webkit-animation: wathca 1s alternate;
      -moz-animation: wathca 1s alternate;
    }
    
     @-webkit-keyframes wathca{
        0%{right: -50px;}
        100%{right: 0px;}
     }
    .nextbutton{
        z-index: 100;
        position: fixed;
        bottom: 3%;
        left: 50%;
        transform: translateX(-50%);
        overflow: hidden;
        width: 50px;
        height: 50px;
        border: 1px solid rgba(240, 161, 168, 1);
        border-radius: 50%;
        /*box-shadow: 0 2px 5px 2px rgba(255, 185, 191, 1), inset 0 2px 1px rgba(240, 161, 168, 0.2),0 0 0 2px rgba(227, 180, 184, 0.8);*/
        box-shadow: 0 2px 5px 2px rgba(255, 185, 191, 1), inset 0 2px 1px rgba(240, 161, 168, 0.2);
    }
    .nextbutton img{
        position: relative;
        top: 3px;
        left: 1px;
        width: 45px;
    }
    .nextbuttona{
      animation-name: nextbuttona;
      animation: nextbuttona 2s linear infinite;
      -webkit-animation: nextbuttona 2s linear infinite;
      -moz-animation: nextbuttona 2s linear infinite;
    }
    @-webkit-keyframes nextbuttona{
        0%{bottom: 3%;}
        50%{bottom: 5%;}
        100%{bottom: 3%;}
     }
    .blessing{
        font-size: 2em;
        padding: 20px 10px;
        /*margin-top: 20%;*/
    }
    .happy{
        position: absolute;
        right: 10px;
        top: 95px;
    }
    .boom{
        position: absolute;
        top: 0;
        left: 0;
    }

    </style>
</head>

<body>
	<!-- loader -->
    <div class="loader m-auto">
        <img class="center-block" src="img/loading.gif" alt="" width="50%">
    </div>
    <div class="page1">
        <img src="img/boom.gif" alt="" width="40%" class="boom">
        <img src="img/happy.png" alt="" width="90%" class="happy">
    	<img class="watch watcha" src="img/corner.png" alt="" width="50%">
        <div class="nextbutton nextbuttona"><img src="img/button.png" alt=""></div>
    </div>
    <div class="page2">
    	<!---->
    	<div class="container">
      <div class="tigre">
        <div class="body">
          <div class="cola"></div>
          <div class="cola3"></div>
          <div class="body7"></div>
          <div class="body5">
            <div class="ray"></div>
          </div>
          <div class="legs"></div>
          <div class="ray3"></div>
          <div class="ray5"></div>
          <div class="legs3"></div>
        </div>
        <div class="head">
          <div class="orejas"></div>
          <div class="orejas3"></div>
          <div class="face"></div>
          <div class="face3">
            <div class="rayas">
              <span class="r1"></span>
              <span class="r2"></span>
              <span class="r3"></span>
              <span class="r4"></span>
              <span class="r5"></span>
              <span class="r6"></span>
              <span class="r7"></span>
              <span class="r8"></span>
            </div>
            <div class="cejas"></div>
            <div class="cejas3"></div>
            <div class="cejas7"></div>
            <div class="ojos">
              <div class="iris"><div class="iris3"></div></div>
            </div>
            <div class="ojos3">
              <div class="iris7"><div class="iris9"></div></div>
            </div>
            <div class="boca7"></div>
            <div class="boca"></div>
            <div class="boca3"></div>
            <div class="bigotes"></div>
            <div class="bigotes3"></div>
          </div>
        </div>
      </div>
    </div>
  <!---->
        <p class="blessing">
            祝<s>小朋友</s>小雪在新的一年里，继续像这只小猪一样可可爱爱，笑口常开，逢考必过!
        </p>
        <center><img src="img/haha.gif" alt="" width="150"></center>
        
        <div class="nextbutton nextbutton2 nextbuttona"><img src="img/button.png" alt=""></div>
    </div>
    <div class="loader loader2 m-auto">
        <img class="center-block" src="img/loading2.gif" alt="" width="50%">
    </div>
    
    <script>
        $(".nextbutton").click(function() {
            $(".page1").fadeOut(100);
            $(".page2").fadeIn(1000);
        });
        $(".nextbutton2").click(function() {
            $(".page2").fadeOut(100);
            $(".loader2").fadeIn(100);
            setTimeout(function(){
                $(".loader2").fadeOut(100);
                $(".page1").fadeIn(1000);
            },2000)
        });
    </script>
</body>

</html>